<template>
    <div class="table-item">
        <div class="table-item-header">
            <div class="table-item-border"></div> <span class="table-item-text">基础表格</span>
            <div class="small-text"></div>
        </div>
        <vol-table ref="table" index :tableData="tableData" @rowClick="rowClick" :columns="columns" :max-height="400"
            :pagination-hide="true" :load-key="true" :column-index="true"></vol-table>
    </div>
</template>
<script lang="jsx">
//如果是自定义vue页面使用的配置，在vue页面的script后一定要加上lang="jsx"
import VolTable from "@/components/basic/VolTable.vue";
import axios from "axios";
export default {
    components: {
        'vol-table': VolTable,
    },
    data() {
        return {
            columns: [
                { field: 'productName', title: '产品名称', type: 'string', width: 130 },
                { field: 'productId', title: '产品编号', type: 'string', width: 70 },
                { field: 'specification', title: '规格', type: 'string', width: 60, align: 'center' },
                { field: 'unitId', title: '单位', type: 'string', width: 80, align: 'center' },
                { field: 'price', title: '单价', type: 'decimal', width: 95 },
                { field: 'number', title: '数量', type: 'int', width: 80 },
                { field: 'totalPrice', title: '总价', type: 'decimal', width: 80 }],
            tableData: [
                {
                    "productName": "D2023082400001",
                    "productId": "2",
                    "specification": "哥",
                    "unitId": "20000",
                    "price": 30,
                    "number": 80,
                    "totalPrice": 200,
                }
            ]
        }
    },
    mounted() {
        this.getProductList();
    },
    methods: {
        getProductList() {
            axios.post('http://localhost:9991/api/PurchaseNote/GetProduct').then(res => {
                this.tableData = res.data;
            })
        }
    }
}
</script>


<style lang="less" scoped>
.table-item-header {
    display: flex;
    align-items: center;
    padding: 6px;

    .table-item-border {
        height: 15px;
        background: rgb(33, 150, 243);
        width: 5px;
        border-radius: 10px;
        position: relative;
        margin-right: 5px;
    }

    .table-item-text {
        font-weight: bolder;
    }

    .table-item-buttons {
        flex: 1;
        text-align: right;
    }

    .small-text {
        font-size: 12px;
        color: #2196F3;
        margin-left: 10px;
        position: relative;
        top: 2px;
    }
}
</style>